<template>
	<view class="bg-white" @click="toArticle">
		<view class="padding padding-top-xl">
			<view class="text-bold text-xl text-black">{{ article.title }}</view>
			<view class="padding-right-sm flex">
				<view>
					<view class="margin-tb-sm text-grey">{{ article.author.username }} | {{String(article.published_at).substring(0,10)}}</view>
					<view class="margin-tb-sm content">{{ article.content }}</view>
				</view>
				<view class="cover margin-tb-sm" v-if="article.cover">
					<image :src="article.cover" mode="aspectFill"></image>
				</view>
			</view>
			<view class="flex justify-between text-sm text-grey" v-if="showDianzan">
        <view>
          <view class="bg-gray padding-ssm" v-if="article.article_category.name">{{ article.article_category.name }}</view>
        </view>
				<view class="icons align-center flex">
					<view class="margin-left">
						<image src="../../static/icons/comment.svg" mode="widthFix"></image>
					</view>
					<view><text>{{article.commentCount}}</text></view>
					<view>
						<image v-if="article.dianzanStatus" src="../../static/icons/dianzan-blue.svg" mode="widthFix" style="width:40upx"></image>
						<image v-else src="../../static/icons/dianzan.svg" mode="widthFix"></image>
					</view>
					<view v-if="article.dianzanCount"><text>{{article.dianzanCount}}</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "indexArticleCard",
		props: {
      article:{
        type: Object,
        required: true
      },
      showDianzan:{
        type:Boolean,
        default: true,
        required:false,
      }
    },
		data() {
			return {};
		},
		methods: {
			toArticle() {
				uni.navigateTo({
					url: '../article/article?id=' + this.article.id,
				})
			},
		}
	}
</script>

<style lang="scss">
	.padding-ssm {
		padding: 10upx 20upx;
		border-radius: 5upx;
	}

	.cover {
		flex-shrink: 0;
		padding: 10upx 0upx 10upx 10upx;

		image {
			width: 180upx;
			height: 160upx;
		}

	}

	.content {
		width: 100%;
		color: #8b8b8b;
		display: -webkit-box;
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	.icons {
		display: flex;

		>view {
			flex-shrink: 0;

      text{
        margin-left: 10upx;
      }

      image{
        width: 40upx;
        margin-left: 20upx;

      }

		}
	}
</style>
